<template>
  <view class="wrap">
    <view class="backImage">
      <image src="../../../static/interImage.png" mode="widthFix" class="img"></image>
    </view>
    <z-paging ref="paging" :pagingStyle="{ 'z-index': 5 }">
      <template #top>
        <view class="header">
          <uv-navbar fixed title="我的直播" autoBack safeAreaInsetTop placeholder :border='false' bg-color="rgba(0,0,0,0)" titleStyle='color: #FFFFFF' leftIconColor='#FFFFFF'></uv-navbar>
          <view class="tab">
            <view class="item" :class="{ active: current == index }" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item }}</view>
          </view>
        </view>
      </template>
      <view class="list">
        <view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
          <view class="hd">
            <view class="test">{{ typeList[item.join_permission] }}</view>
            <view class="title">{{ item.title }}</view>
          </view>
          <view class="desc">{{ statusList[item.status] }}-{{ formatTimeData(item.start_at) }}</view>
          <view class="foot">
            <view class="case" hover-class="none" v-if="item.status == 2 || item.status == 3" @click.stop="goJoin(item)">查看入会信息</view>
            <view class="case" hover-class="none" v-if="item.status == 4 || item.status == 7" @click.stop="goBackLive(item)">管理回放</view>
            <view class="case" hover-class="none" v-if="item.status == 4" @click.stop="downLive(item)">下线</view>
            <view class="case" hover-class="none" v-if="item.status == 5 || item.status == 7" @click.stop="openDesc(item)">查看拒审理由</view>
            <view class="case" hover-class="none" v-if="item.status == 5" @click.stop="editLive(item)">重新提交</view>
            <view class="case" hover-class="none" v-if="item.status == 0" @click.stop="editLive(item)">修改申请</view>
            <view class="case" hover-class="none" v-if="item.need_enroll" @click.stop="goSignList(item)">参会清单 <text class="red" v-if="item.enroll_wait_count"></text></view>
            <!-- <view class="case" hover-class="none" v-if="item.status == 2" @click.stop="addJoinPeople(item)">添加参会人</view> -->
            <view class="case" hover-class="none" v-if="item.status == 0 || item.status == 2" @click.stop="openModalLiveCancel(item)">取消直播</view>
          </view>
        </view>
        <uv-empty :show='showLeng' mode="list" marginTop='200rpx' iconColor='#FFFFFF' textColor='#FFFFFF'></uv-empty>
      </view>
      <template #bottom>
        <view class="footer">
          <button class="btn" hover-class="none" @click="addLive">发起直播</button>
          <uv-safe-bottom></uv-safe-bottom>
        </view>
      </template>
    </z-paging>
    
    <uv-modal ref="modal" title="提示" showCancelButton confirmColor='#E43222' @confirm="liveCancelConfirm">
      <view style="text-align: center;">
        是否确认取消直播？
      </view>
    </uv-modal>
    <uv-modal ref="modalDown" title="提示" showCancelButton confirmColor='#E43222' @confirm="liveDownConfirm">
      <view style="text-align: center;">
        是否要下线直播？下线后不可恢复。
      </view>
    </uv-modal>
    <uv-modal ref="modal2" title="提示" confirmColor='#E43222'>
      <view style="text-align: center;">
        {{ storage.examine_remarks }}
      </view>
    </uv-modal>
    
  </view>
</template>

<script setup>
import { onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import { get, post } from '@/api';
import { ref } from 'vue';
import { formatTimeData, toast } from '@/common';

const modal = ref(null);
const modal2 = ref(null);
const modalDown = ref(null);
const typeList = ref({
  1: '专场',
  2: '机构',
  3: '公开'
})
const statusList = ref({
  0: '审核中',
  1: '下线',
  2: '预告',
  3: '直播中',
  4: '直播结束',
  5: '审核拒绝',
  6: '审核中',
  7: '审核拒绝'
})
const tabList = ref([ '预约直播', '历史直播' ]);
let current = ref(0);
let list = ref([]);
let last_page = 0;
let page = 1;
let limit = 15;
let showLeng = ref(false);
let storage = {};
let isPage = false;

onLoad(() => {
  getList();
})
// 上拉加载
onReachBottom(async () => {
  if(last_page < page || last_page == page) return;
  page++
  getList();
})
onShow(() => {
  if(isPage){
    init();
  }
})
onHide(() => {
  isPage = true;
})

function getList(){
  const params = {
    pagePer: 10,
    page
  }
  get('/api/Live/getStartingLiveList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function getList2(){
  const params = {
    pagePer: 10,
    page
  }
  get('/api/Live/getStartedLiveList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      list.value = [...list.value, ...data.data];
      if(list.value.length){
        showLeng.value = false;
      }else{
        showLeng.value = true;
      }
    }
  })
}
function liveDownConfirm(){
  post('/api/Live/downLive', { lessonLiveId: storage.id }).then(res => {
    if(res.code == 1){
      toast('操作成功');
      init();
    }
  })
}
function liveCancelConfirm(){
  post('/api/Live/cancelLive', { lessonLiveId: storage.id }).then(res => {
    if(res.code == 1){
      toast('操作成功');
      modal.value.close();
      init();
    }
  })
}
// 打开拒审理由弹窗
function openDesc(row){
  storage = row;
  modal2.value.open();
}
// 取消直播打开确认弹窗
function openModalLiveCancel(row){
  storage = row;
  modal.value.open();
}
// 操作下线
function downLive(row){
  storage = row;
  modalDown.value.open();
}
// 重新初始化
function init(){
  list.value = [];
  page = 1;
  if(current.value == 0){
    getList();
  }else{
    getList2();
  }
}
function tabClick(index){
  current.value = index;
  init();
}
function goJoin(row){
  uni.navigateTo({
    url: `/pages/mine/myLive/join?id=${row.id}`
  });
}
function addJoinPeople(row){
  uni.navigateTo({
    url: `/pages/mine/myLive/addPeople?id=${row.id}`
  });
}
function goSignList(row){
  uni.navigateTo({
    url: `/pages/mine/myLive/signList?id=${row.id}&status=${row.status}`
  });
}
function addLive(){
  uni.navigateTo({
    url: '/pages/mine/myLive/addLive?type=add'
  });
}
function editLive(row){
  uni.navigateTo({
    url: `/pages/mine/myLive/addLive?type=edit&id=${row.id}`
  });
}
function goBackLive(row){
  uni.navigateTo({
    url: `/pages/mine/myLive/addLive?type=back&id=${row.id}`
  });
}
function goDetail(row){
  if(row.status == 0 || row.status == 1 || row.status == 6){
    uni.navigateTo({
      url: `/pages/mine/myLive/addLive?type=look&id=${row.id}`
    });
  }
}
</script>

<style lang="scss" scoped>
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 30rpx;
  }
  .list{
    padding: 0 30rpx;
    position: relative;
    z-index: 9;
    .item{
      background-image: linear-gradient(180deg, #ffffff69 0%, #ffffff29 100%);
      box-shadow: 0 0 8rpx 0 #ffffff80;
      border-radius: 18rpx;
      padding: 30rpx;
      margin-bottom: 40rpx;
      .foot{
        padding-top: 25rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .case{
          height: 65rpx;
          line-height: 65rpx;
          padding: 0 10rpx;
          background-image: linear-gradient(121deg, #FF312E 0%, #FF7E7A 100%);
          box-shadow: 0 5rpx 11rpx 0 #ff706d8c;
          border-radius: 7rpx;
          font-weight: 500;
          font-size: 26rpx;
          color: #FFFFFF;
          margin-left: 10rpx;
          position: relative;
          .red{
            position: absolute;
            right: 0;
            top: 0;
            width: 20rpx;
            height: 20rpx;
            background-color: red;
            border-radius: 50%;
            overflow: hidden;
          }
          &:first-child{
            margin-left: 0;
          }
        }
      }
      .desc{
        font-weight: 400;
        font-size: 26rpx;
        color: #ffffffc9;
        padding-top: 25rpx;
      }
      .hd{
        display: flex;
        align-items: center;
        width: 100%;
        .title{
          font-weight: 500;
          font-size: 32rpx;
          color: #FFFFFF;
          padding-left: 16rpx;
          flex: 1;
          width: 0;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;
        }
        .test{
          height: 45rpx;
          line-height: 45rpx;
          background: #FFFFFF;
          border-radius: 10rpx;
          padding: 0 12rpx;
          font-weight: 500;
          font-size: 26rpx;
          color: #E43222;
        }
      }
    }
  }
  .header{
    width: 100%;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 9;
    .tab{
      width: 100%;
      padding: 0 30rpx;
      padding-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item{
        width: 48%;
        height: 72rpx;
        line-height: 72rpx;
        background-color: rgba($color: #FFFFFF, $alpha: .43);
        border-radius: 15rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        &.active{
          background-color: #fff;
          color: #FF4C45;
        }
      }
    }
  }
  .backImage{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F0F0F0;
  }
</style>